<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>水果战争</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<link rel="stylesheet" href="style.css">
	<script src="box2d/Box2d.min.js"></script>
</head>

<body>
	<!-- 游戏页面的组成结构：启动页，开始页，加载页，主场景，计分区，结束页 -->
	<div id="gamecontainer">
		<canvas id="gamecanvas" width="640" height="480" class="gamelayer"></canvas>
		<div id="scorescreen" class="gamelayer">
			<img src="img/sound.png" alt="" id="togglemusic" onclick="game.toggleBackgroundMusic();">
			<img src="img/prev.png" alt="" onclick="game.restartLevel();">
			<span id="score">Score: 0</span>
		</div>
		<div id="gamestartscreen" class="gamelayer">
			<img src="img/play.png" alt="" onclick="game.showLevelScreen()"><br>
			<img src="img/setting.png" alt="">
		</div>
		<div id="levelselectscreen" class="gamelayer">

		</div>
		<div id="loadingscreen" class="gamelayer">
			<div id="loadingmessage"></div>
		</div>
		<div id="endingscreen" class="gamelayer">
			<div>
				<p id="endingmessage">闯关成功</p>
				<p id="playcurrentlevel" onclick="game.restartLevel();">
					<img src="img/prev.png" alt="">
					重玩这关
				</p>
				<p id="playnextlevel" onclick="game.startNextLevel();">
					<img src="img/next.png" alt="">
					玩下一关
				</p>
				<p id="showlevelscreen" onclick="game.showLevelScreen();">
					<img src="img/return.png" alt="">
					重新选关
				</p>
			</div>
		</div>
	</div>
	<script src="animate.js"></script>
	<script src="game.js"></script>
	<script src="box2d.js"></script>
</body>

</html>